import MapboxDraw from '@mapbox/mapbox-gl-draw'
import mapboxGLDrawRectangleDrag from 'mapboxgl-draw-rectangle-drag'

export default function initDraw() {
  const draw = new MapboxDraw({
    displayControlsDefault: false,
    controls: { polygon: true },
    styles: [
      {
        id: 'draw-polygon',
        type: 'fill',
        paint: {
          'fill-color': '#888',
          'fill-opacity': 0.4
        }
      },
      {
        id: 'draw-line',
        type: 'line',
        paint: {
          'line-color': '#FF0000',
          'line-width': 3
        }
      }
    ],
    modes: {
      ...MapboxDraw.modes,
      draw_rectangle_drag: mapboxGLDrawRectangleDrag
    }
  })

  map.on('load', () => {
    map.addControl(draw, 'top-left')
    // const controlElements = document.querySelectorAll('.mapboxgl-ctrl')
    // if (controlElements.length) {
    //   ;(controlElements[1] as HTMLElement).style.display = 'none'
    // }
  })

  return draw
}
